@import '../../../themes/mixins/animations';
@import '../../../themes/mixins/loading-spinner';
@import '../../../themes/mixins/error-message';

.dialog {
  font-family: var(--font-light);

  .description {
    p {
      font-weight: 300;
      line-height: 1.38;
      margin-bottom: 15px;
    }
  }

  :global {
    .SimpleCheckbox_root {
      margin-top: 20px;

      .SimpleCheckbox_check {
        border-color: var(--theme-input-remove-color-light);

        &.SimpleCheckbox_checked {
          background: var(--theme-input-remove-color-light);
        }
      }
    }
  }

  .divider {
    border-top: 1px solid
      var(--theme-settings-undelegate-wallet-divider-border-color);
    height: 1px;
    margin: 20px 0;
    width: 100%;
  }

  .feesRow {
    align-items: center;
    display: flex;
    font-family: var(--font-medium);
    font-weight: 500;
    justify-content: space-between;
    line-height: 1.38;
    margin-bottom: 20px;

    .feesWrapper,
    .depositWrapper {
      flex: 1;
    }

    .feesLabel,
    .depositLabel {
      color: var(--theme-delegation-steps-confirmation-fees-label-color);
      margin-bottom: 6px;
    }

    .calculatingFeesLabel,
    .calculatingDepositLabel {
      @include animated-ellipsis($duration: 1500, $width: 20px);
      --webkit-backface-visibility: hidden;
    }

    .feesAmount,
    .depositAmount {
      user-select: text;

      .feesAmountLabel,
      .depositAmountLabel {
        font-family: var(--font-light);
      }
    }

    .feesAmount {
      color: var(--theme-settings-undelegate-wallet-fees-amount-color);
    }

    .depositAmount {
      color: var(--theme-settings-undelegate-wallet-deposit-amount-color);
    }
  }

  .hardwareWalletStatusWrapper {
    margin-top: 20px;
    max-width: 640px;
    width: 100%;
  }

  .error {
    @include error-message;
    margin-top: 27px;
    text-align: center;
  }

  .isSubmitting {
    box-shadow: none !important;
    @include loading-spinner('../../../assets/images/spinner-light.svg');
  }
}
